<!DOCTYPE html>
<html lang="ch-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传文件</title>
    <link rel="stylesheet" href="../css/common.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <style>
        form {
            width: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        input {
            margin: 10px;
        }

        #body-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 90vh;
        }
    </style>
</head>

<body>
    <div id="body-container">
        <form method="post" enctype="multipart/form-data" class="card">
            <label for="file">请选择文件</label>
            <input type="file" name="file" id="file" accept=".jsonl,.json,.txt,.csv">
            <input type="submit" value="上传文件" name="submit" class="black-button">
        </form>
    </div>

    <script type="module">
        import axiosInstance from '../js/axiosInstance.js';

        const form = document.querySelector('form');
        form.addEventListener('submit', (e) => {
            e.preventDefault(); // 阻止表单默认提交

            let file = document.getElementById('file').files[0];
            if (!file) {
                alert('请选择文件');
                return;
            }
            const formData = new FormData(form);
            axiosInstance.post('/files/upload', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(res => {
                alert(res.data.message); // 提示上传成功
                window.history.back();// 返回到上个页面
            }).catch(err => {
                console.error(err);
            });
        });
    </script>
</body>

</html>